常用的 vue 指令有 v-show v-if v-model v-bind v-on
但如果能客製化指令呢?

像是 pure-admin-thin 就有兩個作者寫的自訂義指令 v-auth v-resize

今天我們來略懂自訂義指令相關的名詞~

拆分

東西太多了先將其分類再一一去理解

指令用法有2種

• 全域使用
• 區域使用

全域使用

//全域
const app = createApp({})

// 使 v-focus 在所有組件(.vue)中都可使用
app.directive('focus', {
  /* ... */
})

區域使用:
vue3.2 setup 語法糖範例

<script setup>
// 在模板中使用 v-focus
// 大小寫注意
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

vue3 Option API 範例

<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
       mounted: (el) => el.focus()
    }
  }
}
</script>

<template>
  <input v-focus />
</template>

相關名詞

• directive-hooks 指令鉤子(鉤子函數) == 生命週期
• hook-arguments 鉤子參數(鉤子函數的參數) == 傳入的參數
  • v-if="1>0" 1>0 就是參數

指令鉤子

概念類似生命週期，只是這邊叫做 hook

vue2 的文件
https://v2.vuejs.org/v2/guide/custom-directive.html#Hook-Functions

//5種
    bind
    inserted
    update
    componentUpdated
    unbind

vue3 的文件
https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks

//多達7種
  created(el, binding, vnode, prevVnode) {},
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted(el, binding, vnode, prevVnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) {},
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode, prevVnode) {},
  unmounted(el, binding, vnode, prevVnode) {}

鉤子參數

vue2 的文件
https://v2.vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

//4種, binding有6種參數
    el
    binding
        name
        value
        oldValue
        expression
        arg
        modifiers
    vnode
    oldVnode

vue3 的文件
https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks

//4種 *表示和之前不同
    el
    binding
        instance*
        dir*
        value
        oldValue
        arg
        modifiers
    vnode
    prevNode*

小結

今天快速盤點了看文件會遇到的名詞，並沒有深入介紹
只能說真不愧是 vue ! 替開發者想得非常周到
有興趣的讀者可以點官方文件仔細閱讀

參考文章

Summer前輩的介紹:
https://www.cythilya.tw/2017/05/05/vue-custom-directive/